<template>
    <div class="capture">
        <div class="btn">
            <el-button type="primary" v-for="(item,index) in btn" :key="index" @click="capture(item)">{{ item.text }}</el-button>
            <el-button type="primary" @click="deleteItem()">删除照片</el-button>
        </div>
        <div class="img"  v-loading="loading">
            <el-carousel style="flex:1;display: flex;flex-direction: column;" v-if="urls.length>0" :autoplay="false" arrow="always" @change="changeImg">
                <el-carousel-item  v-for="(item,index) in urls" :key="index">
                    <el-image
                        :preview-src-list="urls"
                        :src="item"
                        fit="fill"></el-image>
                </el-carousel-item>
            </el-carousel>
            
        </div>
    </div>
</template>
<script>
export default {
    props:["data","exkey"],
    data(){
        return{
            btn:[],
            sCode:"",
            index:1,
            sKey:"",
            urls:[],
            loading:false,
            model:"",
            type:"",
            name:"",
            sId:"",
            keyPId:"",
            imgList:[],
            index:0
        }
    },
    created(){
        this.btn=this.exkey.btn;
        this.model=this.exkey.model;
        this.type=this.exkey.type;
        this.name=this.exkey.name;
        let id=this.exkey.id.split(".");
        let exId=this.exkey.exId.split(".");
        this.sCode=this.data[id[0]][id[1]];
        this.keyPId=exId[0]
        this.sId=this.data[exId[0]][exId[1]];
        this.getFile();
    },
    methods:{
        capture(item){
            if(this.loading){
                this.$alert("正在拍照，请不要重复操作！")
                return;
            }
            var date = new Date();
            var year = date.getFullYear(); 
            var month = date.getMonth() + 1;
            var day = date.getDate();
            month = (month > 9) ? month : ("0" + month);
            day = (day < 10) ? ("0" + day) : day;
            var hour = date.getHours(); // 时
            var minutes = date.getMinutes(); // 分
            var seconds = date.getSeconds() //秒
            let today = year + month  + day;
            let sCode=today+"/"+this.sCode+"_"+today+hour+minutes+seconds+".jpg";
            this.sKey=sCode;
            this.loading=true;
            this.$post("business","/camera/captrue",{deviceId:item.id,sCode:sCode,sId:this.sId,model:this.model,type:this.type,name:this.name}).then(data=>{
                this.loading=false;
                if(data.status=="+OK"){
                    
                    this.getImg();
                }
            })
        },
        getImg(){
            this.$post("business","/camera/getImg",{sKey:this.sKey}).then(data=>{
                if(data.status=="+OK"){
                    this.urls.push(data.url);
                    let item={
                        id:data.id,
                        url:data.url
                    }
                    this.imgList.push(item);
                    this.loading=false;
                }else if(this.index<20){
                    this.getImg();
                    this.index++;
                }
            })
        },
        getFile(){
            this.urls=[];
            this.imgList=[]
            this.$post("business","api/file/getFile",{"id":this.sId,"keyPId":this.keyPId,model:this.model,type:this.type,name:this.name}).then(data=>{
                for(let i=0;i<data.length;i++){
                    this.urls.push(data[i].url)
                    this.imgList.push(data[i]);
                }
            })
        },
        deleteItem(){
            this.$confirm('确定要删除该图片?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
                }).then(() => {
                    //alert(this.index+"=="+this.imgList.length)
                    this.$post("business","api/file/deleteFile",{id:this.imgList[this.index].id,sId:this.sId}).then(data=>{
                        this.$alert("操作成功")
                        this.imgList.splice(this.index,1)
                        this.urls.splice(this.index,1)
                    })
                }).catch(() => {
                   
                });
        },
        changeImg(index){
            this.index=index;
        }
    }
}
</script>
<style scoped>
.capture{
    width:100%;
    height:100%;
    display: flex;
    flex-direction: column;
}
.btn{
    height:50px;
}
.img{
    flex:1;
    
    display: flex;
    flex-direction: column;
}
.img>>>.el-carousel__container{
    height:100%;
}
</style>